<script setup>
import { defineProps, watch, computed, ref } from "vue";
import { handleClick } from "@/utils/index";
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps(["content"]);
const showBtn = ref(false);
const style = computed(() => ({
  opacity: props.content.style.opacity + "!important",
  width: route.path == "/works/add" ? "100%" : props.content.style.with + "%",
  height:
    route.path == "/works/add" ? "100%" : props.content.style.height + "%",
  position: route.path != "/works/add" ? "absolute" : "",
  top: props.content.style.top,
  left: props.content.style.left,
  background: `${props.content.url}no-repeat center`,
  backgroundSize: "100% 100%",
  color: props.content.style.color,
  fontWeight: props.content.style.weight,
}));
watch(
  () => props.content,
  (newValue) => {
    console.log(newValue);
  },
  {
    deep: true,
  }
);
setTimeout(() => {
  showBtn.value = true;
}, Number(props.content.showTime));
</script>
<template>
  <div
    v-if="showBtn"
    :style="style"
    class="btn-box"
    @click="handleClick(content)"
  >
    {{ content.btnName }}
  </div>
</template>

<style lang="less" scoped>
.btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
</style>
